<!-- 职位详情左侧组件 -->
<template>
  <div class="role-list">
    <div @click="collapse" class="collapseBtn">
      <IconCaretRight v-if="isCollapsed" />
      <IconCaretLeft v-else />
    </div>
    <a-layout class="layout-demo">
      <a-layout-sider
        collapsible
        breakpoint="xl"
        hide-trigger
        :collapsed="isCollapsed"
        :collapsed-width="0"
      >
        <div v-show="!isCollapsed">
          <a-scrollbar style="height: 100%; overflow: auto">
            <div class="scroll">
              <a-input-search
                allow-clear
                class="search"
                placeholder="输入分类名称"
                v-model="searchVal"
                @search="onSearch"
                @press-enter="onSearch"
              />

              <div class="scroll-content">
                <div
                  v-for="(item, index) in originTreeData"
                  :key="index"
                  class="item"
                  @click="itemClick(item)"
                >
                  {{ item.name }}
                </div>
                <!-- <a-tree
              :fieldNames="{
                key: 'id',
                title: 'name'
              }"
              :data="treeData"
              v-model:expanded-keys="expandKey"
              showLine
            >
              <template #title="nodeData">
                <template
                  v-if="((index = getMatchIndex(nodeData?.name)), index < 0)"
                  >{{ nodeData?.name }}</template
                >
                <span v-else>
                  {{ nodeData?.name?.substr(0, index) }}
                  <span style="color: var(--color-primary-light-4)">
                    {{ nodeData?.name?.substr(index, searchVal.length) }} </span
                  >{{ nodeData?.name?.substr(index + searchVal.length) }}
                </span>
              </template>
            </a-tree> -->
              </div>
            </div>
          </a-scrollbar>
        </div>
      </a-layout-sider>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue';
import {
  GetPosition,
  GetPositionStandard
} from '@/apis/management/organization/positionManagement';

const router = useRouter();
let searchVal = ref(''); // 搜索框
let originTreeData = ref([]); // 储存最初的树形数据

// 获取列表数据
const getData = async () => {
  try {
    const { content }: any = await GetPositionStandard({
      name: searchVal.value,
      pageNumber: 0,
      pageSize: -1
    });
    originTreeData.value = content;
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

let isCollapsed = ref(false); // 判断是否收起
const collapse = (collapsed: boolean) => {
  isCollapsed.value = !isCollapsed.value;
};

// 搜索框
const onSearch = () => {
  getData();
};

// 点击某一项
const itemClick = (record: any) => {
  router.push({
    name: 'PositionStandardFileDetail',
    query: {
      id: record.id,
      ownerType: record.useTemplate.ownerType
    }
  });
};

// 获取符合的数据
// const getMatchIndex = (name: string): number => {
//   if (!searchVal.value) return -1;
//   return name.toLowerCase().indexOf(searchVal.value.toLowerCase()) as number;
// };
</script>

<style scoped lang="less">
.role-list {
  position: relative;
  padding: 15px;
  .collapseBtn {
    position: absolute;
    z-index: 999;
    top: 40%;
    right: 15px;
    height: 70px;
    width: 15px;
    background-color: #eee;
    line-height: 70px;
    text-align: center;
    cursor: pointer;
  }
  .layout-demo {
    height: 100%;
  }
  .scroll {
    padding: 10px;
    .search {
      background-color: #fff;
      height: 40px;
      border: 1px solid #ccc;
    }
    .item {
      margin-top: 10px;
      cursor: pointer;
    }
    .item:hover {
      color: #165dff;
    }
  }
}
</style>
